<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
#root { background-color: red }
.inherit { background-color: inherit }
</style>
<div id="root">
    <div class="inherit">
        <div class="inherit">
            <div id="inner" class="inherit"></div>
        </div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script>
description("");

root.offsetTop; // force recalc

root.style.background = "green";

// The #root element, elements with .inherited and their siblings (5 in total) will need a recalc.
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "5");

var green = "rgb(0, 128, 0)";
shouldBe("getComputedStyle(inner).backgroundColor", "green");
</script>
